<template>
    <el-dialog class="detail-dialog" v-model="detailDialogVisible" title="查看详情" width="1300" @closed="closeDialog">
        <el-tabs v-model="activeName" class="demo-tabs" tab-position="left" @tab-click="handleClick">
            <el-tab-pane label="工单详情" name="info">
                <AranDetail :detailFrom="detailFrom" />
            </el-tab-pane>

            <!-- <el-tab-pane label="延期操作" name="ops" v-if="detailFrom.expertGroupProcessingResult === '延期解决'"> -->
            <el-tab-pane label="延期操作" name="ops">
                <DelayDetail ref="refDelayDetail" :detailFrom="detailFrom" @saveSuccess="saveSuccess"
                    @closeDialog="closeDialog" />
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script setup>
import { ref, toRefs, toRef, reactive, computed, defineProps } from 'vue'
import AranDetail from './AranDetail.vue';
import DelayDetail from './DelayDetail.vue';

const emit = defineEmits(['saveSuccess']);

const props = defineProps({
    /* message: {
        type: String,
        default: '',
        required: true
    } */
})

let detailDialogVisible = ref(false);
let detailFrom = ref({});
const refDelayDetail = ref(null);
const activeName = ref("info");

const show = (row) => {
    detailDialogVisible.value = true;
    detailFrom.value = row;
    // activeName.value = "info";
};

const handleClick = (tab, event) => {
    // console.log(tab.props.name)
    activeName.value = tab.props.name;

    if (activeName.value == "ops") {
        refDelayDetail.value?.initDelayDetail();
    }
}

const closeDialog = () => {
    detailDialogVisible.value = false;
    detailFrom.value = {};
    activeName.value = "info";
}

const saveSuccess = () => {
    emit('saveSuccess');
}

defineExpose({ show });
</script>

<style lang="scss">
.el-dialog.detail-dialog {
    margin-top: 5vh;
    height: 90vh;

    .el-dialog__body {
        height: 93%;

        .el-tabs {
            height: 100%;

            .el-tabs__content {
                height: 100%;
                overflow: auto;

                .el-scrollbar {
                    .button-group {
                        position: relative;
                        display: block;

                        .el-form-item__content {
                            position: absolute;
                            right: 0;
                            top: -15px;
                        }
                    }

                    .button-container {
                        text-align: center;
                        margin: 10px 0 0;
                    }
                }
            }
        }
    }
}
</style>